<template>
  <div class="entranceExamDetails page-exp">
    <pageHeader></pageHeader>
    <div class="content">
      <div class="crumbs flex-r">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/entranceExam' }">考试入口</el-breadcrumb-item>
          <el-breadcrumb-item v-if="type == 'examDetail'">考试详情</el-breadcrumb-item>
          <el-breadcrumb-item v-if="type == 'mistake'">错题回顾</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="modelTestResults" v-if="type == 'mistake'" v-loading="testRsLoad">
        <img :src="diaploama" alt />
        <span class="finalScore">{{ examResult.finalScore }}</span>
        <div>
          <h1>本次模考成绩</h1>
          <div class="desc">
            <div class="item">
              <p class="total">{{ examResult.totalQuestion }}道</p>
              <p>总题数</p>
            </div>
            <div class="item">
              <p class="answer">{{ examResult.totalQuestion }}道</p>
              <p>总答题</p>
            </div>
            <div class="item">
              <p class="accuracy">{{ examResult.accuracy }}</p>
              <p>正确率</p>
            </div>
            <div class="item">
              <p class="credits">+{{ examResult.score }}</p>
              <p>积分数</p>
            </div>
          </div>
        </div>
      </div>
      <div class="quizArea flex-rb">
        <div class="quizContent">
          <div class="title flex-rs">
            <p>{{ examName }}</p>
            <!-- <p>答完自动跳转至下一题</p> -->
            <p></p>
          </div>
          <div class="inside" v-loading="quizCardLoading">
            <template v-if="current < sCount">
              <h1 class="stem">(单选) {{ current + 1 }}.{{ problems.singleChoiceQuestionBeanList[current].context }}</h1>
              <!-- <el-radio-group v-model="radio" class="flex-c"> -->
              <el-radio
                v-model="radio"
                :disabled="type == 'mistake' ? true : false || sData[current].userAnswer ? true : false"
                :label="item"
                v-for="item in sData[current].options"
                :key="item.id"
                >{{ item }}</el-radio
              >
              <!-- </el-radio-group> -->
              <div class="btnGroup">
                <el-button type="primary" v-if="type == 'examDetail'" round @click="nextExam(sData[current].id)">下一题</el-button>
                <el-button type="primary" v-if="type == 'mistake'" round @click="nextErrorExam">下一题</el-button>
              </div>
              <template v-if="type == 'mistake'">
                <!-- <p>
                  解析：
                  <img :src="questionMark" class="questionMark" alt />
                </p>-->
                <p class="myAnswer">
                  正确答案：
                  <span class="correct" v-if="sData[current] && sData[current].result">{{ sData[current].result }}</span>
                </p>
                <p class="myAnswer">
                  您的答案：
                  <span class="correct" v-if="sData[current] && sData[current].userResult && sData[current].userResult == sData[current].result"
                    >回答正确：{{ sData[current].userResult }}</span
                  >
                  <span class="error" v-if="sData[current] && sData[current].userResult && sData[current].userResult != sData[current].result"
                    >回答错误：{{ sData[current].userResult }}</span
                  >
                </p>
                <h1 class="resolve">本题解析</h1>
                <p class="analysis" v-if="sData[current] && sData[current].analysis">{{ sData[current].analysis }}</p>
                <p class="analysis" v-else>暂无解析</p>
              </template>
            </template>
            <template v-if="current >= sCount && current < sCount + mCount">
              <h1
                class="stem"
                v-if="problems.multipleChoiceQuestionBeanList[current - sCount] && problems.multipleChoiceQuestionBeanList[current - sCount].context"
              >
                (多选) {{ current + 1 }}.{{ problems.multipleChoiceQuestionBeanList[current - sCount].context }}
              </h1>
              <el-checkbox-group v-model="checkbox" class="flex-cs" v-if="mData[current - sCount] && mData[current - sCount].options">
                <el-checkbox
                  :label="item"
                  :disabled="type == 'mistake' ? true : false || mData[current - sCount].userAnswer ? true : false"
                  v-for="item in mData[current - sCount].options"
                  :key="item.id"
                  >{{ item }}</el-checkbox
                >
              </el-checkbox-group>
              <div class="btnGroup">
                <el-button type="primary" round v-if="type == 'examDetail'" @click="nextExam(mData[current - sCount].id)">下一题</el-button>
                <el-button type="primary" v-if="type == 'mistake'" round @click="nextErrorExam">下一题</el-button>
              </div>
              <template v-if="type == 'mistake'">
                <!-- <p>
                  解析：
                  <img :src="questionMark" class="questionMark" alt />
                </p>-->
                <p class="myAnswer">
                  正确答案：
                  <span class="correct" v-if="mData[current] && mData[current].result">{{ mData[current].result }}</span>
                </p>
                <p class="myAnswer">
                  您的答案：
                  <span class="correct" v-if="mData[current] && mData[current].userResult && mData[current].userResult == mData[current].result"
                    >回答正确：{{ mData[current].userResult }}</span
                  >
                  <span class="error" v-if="mData[current] && mData[current].userResult && mData[current].userResult != mData[current].result"
                    >回答错误：{{ mData[current].userResult }}</span
                  >
                </p>
                <h1 class="resolve">本题解析</h1>
                <p class="analysis" v-if="mData[current] && mData[current].analysis">{{ mData[current].analysis }}</p>
                <p class="analysis" v-else>暂无解析</p>
              </template>
            </template>
            <template v-if="current >= sCount + mCount">
              <h1
                class="stem"
                v-if="
                  problems.judgeChoiceQuestionBeanList[current - sCount - mCount] &&
                    problems.judgeChoiceQuestionBeanList[current - sCount - mCount].context
                "
              >
                (判断) {{ current + 1 }}.{{ problems.judgeChoiceQuestionBeanList[current - sCount - mCount].context }}
              </h1>
              <el-radio-group v-model="trueFalse" class="flex-c" :disabled="type ? true : false">
                <el-radio :label="1" value="对">对</el-radio>
                <el-radio :label="0" value="错">错</el-radio>
              </el-radio-group>
              <div class="btnGroup">
                <el-button type="primary" round v-if="type == 'examDetail'" @click="nextExam(jData[current - sCount - mCount].id)">下一题</el-button>
                <el-button type="primary" v-if="type == 'mistake'" round @click="nextErrorExam">下一题</el-button>
              </div>
              <template v-if="type == 'mistake'">
                <!-- <p>
                  解析：
                  <img :src="questionMark" class="questionMark" alt />
                </p>-->
                <p class="myAnswer">
                  正确答案：
                  <span class="correct" v-if="jData[current] && jData[current].result">{{ jData[current].result }}</span>
                </p>
                <p class="myAnswer">
                  您的答案：
                  <span class="correct" v-if="jData[current] && jData[current].userResult && jData[current].userResult == jData[current].result"
                    >回答正确：{{ jData[current].userResult }}</span
                  >
                  <span class="error" v-if="jData[current] && jData[current].userResult && jData[current].userResult != jData[current].result"
                    >回答错误：{{ jData[current].userResult }}</span
                  >
                </p>
                <h1 class="resolve">本题解析</h1>
                <p class="analysis" v-if="jData[current] && jData[current].analysis">{{ jData[current].analysis }}</p>
                <p class="analysis" v-else>暂无解析</p>
              </template>
            </template>
          </div>
        </div>
        <div class="quizCard" v-loading="quizCardLoading">
          <div class="bar"></div>
          <div class="baseInfo">
            <h1 class="title">基本信息</h1>
            <div class="info">
              <span>考试发起人：{{ examInfo.provide }}</span>
              <span v-if="type == 'examDetail'">试题：{{ quizNowStatus.length }}道</span>
              <span v-if="type == 'mistake'">试题：{{ examResult.totalQuestion }}道</span>
              <span style="width:100%">发起部门：{{ examInfo.deptName }}</span>
              <span>试卷满分：{{ examInfo.score }}</span>
              <span>考试时间：{{ examInfo.time }}分钟</span>
            </div>
            <h1 class="title">答题卡</h1>
            <div class="status flex-rs" v-if="type == 'examDetail'">
              <div class="process">{{ current + 1 }}/{{ quizNowStatus.length }}道</div>
              <div class="totalTime">时间：{{ minute }}:{{ second }}</div>
            </div>
            <div class="status flex-rs" v-if="type == 'mistake'">
              <div class="process">{{ current + 1 }}/{{ sData.length + mData.length + jData.length }}道</div>
              <div class="totalTime">时间：{{ tool.getCookie("xinyun-front-answer-time") }}</div>
            </div>
            <div class="quizNumbers" v-if="type == 'mistake' && sData[current] && sData[current].userResult && sData[current].result">
              <div
                class="cell"
                :class="{
                  select: current == index,
                  correct: sData[current].userResult == sData[current].result,
                  error: sData[current].userResult != sData[current].result
                }"
                v-for="(item, index) in sData.length + mData.length + jData.length"
                :key="index"
                @click="showCurrentExamDetail(index)"
              >
                {{ index + 1 }}
              </div>
            </div>
            <div class="quizNumbers" v-if="type == 'examDetail'">
              <div
                class="cell"
                :class="{ select: current == index, right: item.flag === 1, error: item.flag === 0, notFinish: !item.userResult }"
                v-for="(item, index) in quizNowStatus"
                :key="index"
                @click="showCurrentExamDetail(index, item.flag)"
              >
                {{ index + 1 }}
              </div>
            </div>
            <div class="figureColumn flex-rs">
              <span></span>
              <span>当前选题</span>
              <span class="correct"></span>
              <span>答对选题</span>
              <span class="error"></span>
              <span>答错选题</span>
              <span class="notFinish" v-if="type == 'examDetail'"></span>
              <span v-if="type == 'examDetail'">没有答题</span>
            </div>
            <div class="btnGroup flex-r">
              <!-- <el-button type="primary" round>重新答题</el-button> -->
              <el-button type="primary" round @click="handSubmit">交卷</el-button>
            </div>
            <el-dialog :visible.sync="handPaperVisible" width="618px" class="handPaperDialog">
              <img :src="handPaperImg" alt />
              <div class="flex-c handStatus">
                <h1>答题结束</h1>
                <h1 class="time">共计费时 {{ remainTime }}</h1>
                <span slot="footer" class="dialog-footer">
                  <!-- <el-button @click="handPaperVisible = false">取消</el-button> -->
                  <el-button @click="handSubmit">交卷确定</el-button>
                </span>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
export default {
  name: "entranceExam-detail",
  components: {
    pageHeader,
    PageFooter
  },
  watch: {
    second: {
      handler(newVal) {
        this.num(newVal);
      }
    },
    minute: {
      handler(newVal) {
        this.num(newVal);
      }
    }
  },
  data() {
    return {
      examId: this.$route.query.id,
      examName: this.$route.query.name,
      type: this.$route.query.type,
      testRsLoad: true,
      quizCardLoading: true,
      startTime: "",
      submitTime: "",
      count: 1,
      radio: "",
      trueFalse: "",
      checkbox: [],
      handPaperVisible: false,
      examResult: "", //考试结果
      diaploama: require("@/assets/img/entranceExam/diploma.png"),
      handPaperImg: require("@/assets/img/entranceExam/handPaper.png"),
      questionMark: require("@/assets/img/entranceExam/questionMark.png"),
      examQuestionId: "", //试题id
      current: 0,
      remainTime: "",
      minutes: "",
      seconds: 0,
      sData: [],
      mData: [],
      jData: [],
      //所有题目信息
      problems: {
        judgeChoiceQuestionBeanList: [],
        multipleChoiceQuestionBeanList: [],
        singleChoiceQuestionBeanList: []
      },
      // 错题详细信息
      quiz: [],
      // 答题最新状态
      quizNowStatus: []
    };
  },
  computed: {
    second() {
      return this.num(this.seconds);
    },
    minute() {
      return this.num(this.minutes);
    },
    examInfo() {
      let json;
      if (this.$route.query.examInfo) {
        json = JSON.parse(this.$route.query.examInfo);
      }
      return json;
    },
    // 单选数量
    sCount() {
      return this.problems.singleChoiceQuestionBeanList.length;
    },
    // 多选数量
    mCount() {
      return this.problems.multipleChoiceQuestionBeanList.length;
    },
    // 判断数量
    jCount() {
      return this.problems.judgeChoiceQuestionBeanList.length;
    },
    // 题目总数
    quizCount() {
      return this.sCount + this.mCount + this.jCount;
    }
  },
  // beforeRouteLeave(to, form, next) {
  //   let that = this;
  //   if (that.count != that.problems.length - 1) {
  //     that
  //       .$alert("确定离开答题页面吗？", "提示", {
  //         confirmButtonText: "确定",
  //         type: "warning"
  //       })
  //       .then(() => {
  //         next();
  //       })
  //       .catch(() => {});
  //   }
  // },
  created() {
    this.startTime = new Date().getTime();
    // 开启分钟倒计时
    this.startcountDown();
    // 获取所有题目信息
    this.getExamDetails(1, this.count);
    // 获取考试试题结果（最新）
    // this.getExamNow();
  },
  methods: {
    showCurrentExamDetail(index, flag) {
      this.current = index;
    },
    getExamNow() {
      let that = this;
      that.quizCardLoading = true;
      that
        .$http({
          url: "/wisdomlearn/exam/v1/getQuestionResultList",
          method: "post",
          data: {
            examId: that.examId
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.quizNowStatus = res.data;
            that.quizCardLoading = false;
            that.problems = {
              judgeChoiceQuestionBeanList: res.data.filter(v => v.questionType == 3),
              multipleChoiceQuestionBeanList: res.data.filter(v => v.questionType == 2),
              singleChoiceQuestionBeanList: res.data.filter(v => v.questionType == 1)
            };
            // 重组单选数据
            that.sData = that.problems.singleChoiceQuestionBeanList;
            for (let i = 0; i < that.sData.length; i++) {
              that.$set(that.sData[i], "options", [
                "A." + that.sData[i].freeA,
                "B." + that.sData[i].freeB,
                "C." + that.sData[i].freeC,
                "D." + that.sData[i].freeD
              ]);
              that.$set(that.sData[i], "userAnswer", res.data[i].userResult);
            }
            // 重组多选数据
            that.mData = that.problems.multipleChoiceQuestionBeanList;
            for (let i = 0; i < that.mData.length; i++) {
              that.$set(that.mData[i], "options", [
                "A." + that.mData[i].freeA,
                "B." + that.mData[i].freeB,
                "C." + that.mData[i].freeC,
                "D." + that.mData[i].freeD,
                "E." + that.mData[i].freeE,
                "F." + that.mData[i].freeF
              ]);
              that.$set(that.mData[i], "userAnswer", res.data[i].userResult);
            }
            that.jData = that.problems.judgeChoiceQuestionBeanList;
          }
        })
        .catch(err => {
          that.quizCardLoading = false;
        });
    },

    num(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    startcountDown() {
      let that = this;
      that.minutes = that.examInfo.time;
      let time = window.setInterval(function() {
        if (that.seconds === 0 && that.minutes !== 0) {
          that.seconds = 59;
          that.minutes -= 1;
        } else if (that.minutes === 0 && that.seconds === 0) {
          that.seconds = 0;
          window.clearInterval(time);
        } else {
          that.seconds -= 1;
        }
      }, 1000);
    },
    getExamDetails(type, count) {
      let that = this;
      that
        .$http({
          url: "/wisdomlearn/exam/v1/getExamAllQuestions",
          method: "post",
          data: {
            examId: that.examId
          }
        })
        .then(res => {
          if (res && res.data && res.retCode == "00000") {
            that.problems = {
              judgeChoiceQuestionBeanList: res.data.judgeChoiceQuestionBeanList,
              multipleChoiceQuestionBeanList: res.data.multipleChoiceQuestionBeanList,
              singleChoiceQuestionBeanList: res.data.singleChoiceQuestionBeanList
            };
            // 重组单选数据
            that.sData = that.problems.singleChoiceQuestionBeanList;
            for (let i = 0; i < that.sData.length; i++) {
              that.$set(that.sData[i], "options", [
                "A." + that.sData[i].freeA,
                "B." + that.sData[i].freeB,
                "C." + that.sData[i].freeC,
                "D." + that.sData[i].freeD
              ]);
            }
            // 重组多选数据
            that.mData = that.problems.multipleChoiceQuestionBeanList;
            for (let i = 0; i < that.mData.length; i++) {
              that.$set(that.mData[i], "options", [
                "A." + that.mData[i].freeA,
                "B." + that.mData[i].freeB,
                "C." + that.mData[i].freeC,
                "D." + that.mData[i].freeD,
                "E." + that.mData[i].freeE,
                "F." + that.mData[i].freeF
              ]);
            }
            that.jData = that.problems.judgeChoiceQuestionBeanList;
          }
          this.getExamNow();
        })
        .catch(err => {});
    },
    isAnswer(data, id) {
      let that = this;
      // 没做答
      if (!data && data !== 0 && data !== 1) {
        that.current++;
      } else {
        // 已做答
        that.current++;
        that.handIn(data, id);
      }
    },
    nextErrorExam() {
      if (this.current < this.quizCount - 2) {
        this.current++;
      } else {
        return false;
      }
    },
    nextExam(id) {
      let that = this;
      let data;
      if (that.type == "examDetail") {
        if (that.current < that.sCount) {
          data = that.radio.split(".")[0];
          that.isAnswer(data, id);
          if (that.current == that.quizNowStatus.length) {
            that.handPaper();
          }
        } else if (that.current < that.sCount + that.mCount) {
          data = that.checkbox
            .map(v => {
              return v.split(".")[0];
            })
            .sort()
            .join("");
          that.isAnswer(data, id);
        } else if (that.current < that.quizCount - 1) {
          data = that.trueFalse;
          that.isAnswer(data, id);
        } else if (that.current == that.quizCount - 1) {
          data = that.trueFalse;
          that.isAnswer(data, id);
          that.handPaper();
        }
      } else {
        that.current++;
      }
    },
    handPaper() {
      this.submitTime = new Date().getTime();
      this.handPaperVisible = true;
      this.remainTime = this.formatDuring(this.submitTime - this.startTime);
    },
    formatDuring(mss) {
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = (mss % (1000 * 60)) / 1000;
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return (hours + ":" + minutes + ":" + seconds || "").split(".")[0];
    },
    // 交卷确定
    handSubmit() {
      let that = this;
      that.$router.push({
        path: "/entranceExam/answerResult",
        query: {
          name: that.examName,
          examId: that.examId,
          examInfo: that.$route.query.examInfo
        }
      });
      that.remainTime = that.formatDuring(new Date().getTime() - that.startTime);
      that.tool.setCookie("xinyun-front-answer-time", that.remainTime);
      that.handPaperVisible = false;
    },
    // 每道题提交函数
    handIn(data, id) {
      let that = this;
      that
        .$http({
          url: "/wisdomlearn/exam/v1/updateExamQuestionsResult",
          method: "post",
          data: {
            id: id,
            examQuestionResult: data
          }
        })
        .then(res => {
          if (res.retCode && res.retCode == "00000") {
            that.radio = "";
            that.trueFalse = "";
            that.checkbox = [];
          }
          that.getExamNow();
        })
        .catch(err => {});
    }
  }
};
</script>
<style scoped>
.entranceExamDetails .content {
  min-width: 1200px;
  flex: 1;
  background: #f2f2f2;
}
.entranceExamDetails .content .crumbs {
  width: 100%;
  height: 80px;
  background: #f0efef;
  border-bottom: 1px solid #b6aeae;
}
.content .quizArea {
  width: 1200px;
  margin: 15px auto;
  align-items: flex-start;
}
.quizContent {
  width: 62%;
  background: #fff;
  box-shadow: 0 2px 4px 7px rgba(242, 240, 240, 0.5);
  border-radius: 4px;
}
.quizContent .title {
  width: 100%;
  height: 138px;
  padding: 10px 20px 10px 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #084dcd;
  position: relative;
}
.quizContent .title p {
  font-size: 21px;
  font-weight: bold;
  width: 70%;
  color: #1e1e1e;
  letter-spacing: 0.08px;
  line-height: 39px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.quizContent .title p:last-child {
  color: #818387;
  font-size: 16px;
  letter-spacing: 0.06px;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 20px;
}
.quizContent .inside {
  padding: 30px 60px;
  box-sizing: border-box;
}
.inside .stem {
  font-size: 21px;
  color: #020202;
  letter-spacing: 0.08px;
  margin-bottom: 30px;
}
.inside .resolve {
  font-size: 21px;
  color: #1968bb;
  letter-spacing: 0.08px;
  line-height: 29px;
}
.inside .btnGroup {
  margin: 30px 0;
}
.inside .btnGroup button {
  width: 160px;
  height: 48px;
  font-size: 21px;
  color: #fefeff;
  letter-spacing: 0.08px;
  background: #05ad1d;
}
.inside .btnGroup button:last-child {
  /* margin-left: 30px; */
  background: #084dcd;
}
.inside .myAnswer span {
  font-size: 14px;
  color: #2178e1;
  letter-spacing: 0.05px;
}
.inside .myAnswer .error {
  color: #ca2b2b;
}
.inside p {
  font-size: 16px;
  color: #444444;
  letter-spacing: 0.06px;
  margin-bottom: 30px;
}
.inside .analysis {
  margin-top: 20px;
  font-weight: bold;
}
.inside .questionMark {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
/* 答题卡 */
.quizCard {
  width: 37%;
  background: #fff;
  border-radius: 9px;
  border-radius: 9px;
}
.quizCard .bar {
  height: 15px;
  background-image: linear-gradient(-51deg, #0bb5fe 0%, #086afc 100%);
}
.quizCard .baseInfo {
  padding: 20px 30px;
  box-sizing: border-box;
}
.quizCard .baseInfo .title {
  font-size: 21px;
  color: #020202;
  letter-spacing: 0.08px;
  margin-bottom: 20px;
}
.baseInfo .status div {
  width: 50%;
  font-size: 18px;
  color: #444444;
  letter-spacing: 0.07px;
  margin-bottom: 20px;
}
.baseInfo .info span {
  width: 50%;
  display: inline-block;
  font-size: 16px;
  color: #444444;
  letter-spacing: 0.06px;
  margin-bottom: 10px;
}
.baseInfo .quizNumbers .cell {
  width: 22px;
  height: 22px;
  line-height: 22px;
  border: 1px solid #d3d0d0;
  border-radius: 5px;
  display: inline-block;
  margin: 0 15px 15px 0;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.baseInfo .quizNumbers .cell.right {
  background: #1968bb !important;
  color: #fff;
}
.baseInfo .quizNumbers .cell.select {
  background: #19bb71 !important;
  color: #fff;
}
.baseInfo .quizNumbers .cell.correct {
  background: #1968bb;
  color: #fff;
}
.baseInfo .quizNumbers .cell.error {
  background: #d72424;
  color: #fff;
}
.baseInfo .quizNumbers .cell.notFinish {
  background: #ccc;
  color: #fff;
}
.baseInfo .quizNumbers .cell:nth-child(10n) {
  margin-right: 0;
}
.baseInfo .figureColumn {
  font-size: 10px;
  color: #676767;
  letter-spacing: 0.04px;
}
.baseInfo .figureColumn .correct {
  background: #1968bb !important;
}
.baseInfo .figureColumn .error {
  background: #d72424 !important;
}
.baseInfo .figureColumn .notFinish {
  background: #ccc !important;
}
.baseInfo .figureColumn span {
  margin-right: 7px;
}
.baseInfo .figureColumn span:nth-of-type(2n + 1) {
  width: 12px;
  height: 12px;
  background: #19bb71;
}
.quizCard .baseInfo .btnGroup {
  margin-top: 20px;
}
.quizCard .baseInfo .btnGroup button {
  width: 114px;
  height: 44px;
  border-radius: 22px;
  background: #2686ec;
  font-size: 16px;
  color: #f8f8f8;
  letter-spacing: 0.06px;
}
.quizCard .baseInfo .btnGroup button:last-child {
  background: #1968bb;
}
.handPaperDialog h1 {
  font-size: 34px;
  color: #1968bb;
  letter-spacing: 0.13px;
  margin-top: 60px;
}
.handPaperDialog .time {
  font-size: 21px;
  color: #676767;
  letter-spacing: 0.08px;
}
.handPaperDialog img {
  width: 234px;
  height: 234px;
  object-fit: contain;
}
.handPaperDialog .handStatus {
  margin-left: 20px;
  justify-content: space-between;
  align-items: flex-start;
}
.handStatus .time {
  margin-top: 0px;
}
/* 模考成绩 */
.modelTestResults {
  width: 1200px;
  height: 195px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  position: relative;
}
.modelTestResults .finalScore {
  position: absolute;
  top: 47%;
  left: 7%;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  width: 50px;
  text-align: center;
}
.modelTestResults img {
  width: 150px;
  height: 150px;
  margin-right: 30px;
}
.modelTestResults h1 {
  font-size: 36px;
  color: #2178e1;
  letter-spacing: 0.14px;
}
.modelTestResults .desc {
  width: 100%;
  margin-top: 30px;
}
.desc .item {
  width: max-content;
  display: inline-block;
  margin-right: 20px;
  text-align: center;
}
.desc .item p:last-child {
  margin-top: 5px;
  font-size: 12px;
  color: #4d4d4d;
  letter-spacing: 0.05px;
}
.item .total {
  font-size: 24px !important;
  color: #dc8100 !important;
  letter-spacing: 0.09px !important;
}
.item .answer {
  font-size: 24px !important;
  color: #3ab5bb !important;
  letter-spacing: 0.09px !important;
}
.item .accuracy {
  font-size: 24px !important;
  color: #2178e1 !important;
  letter-spacing: 0.09px !important;
}
.item .credits {
  font-size: 24px !important;
  color: #eac829 !important;
  letter-spacing: 0.09px !important;
}
.quizContent .inside >>> .el-radio__inner {
  border: 1px solid #909399;
}
</style>
<style>
.entranceExamDetails .content .crumbs .el-breadcrumb {
  width: 1200px;
  margin: 0 auto;
  font-size: 21px;
}
.quizContent .inside .el-radio-group {
  align-items: flex-start;
  margin: 30px 0;
}
.quizContent .inside .el-radio {
  display: flex;
  align-items: baseline;
}
.quizContent .inside .el-radio__label {
  font-size: 16px;
  color: #444444;
  line-height: 40px;
  letter-spacing: 0.06px;
  white-space: normal;
  display: inline-block;
}
.quizCard .baseInfo .handPaperDialog .el-dialog__header {
  display: none;
}
.quizCard .baseInfo .handPaperDialog .el-dialog__body {
  display: flex;
  justify-content: flex-start;
}
.quizCard .el-dialog {
  border-radius: 17px;
}
.handStatus .el-button {
  width: 98px;
}
.entranceExamDetails .el-checkbox {
  height: 40px;
}
</style>
